<template>
	<view class="content">
		<concern-banner ref="concern"></concern-banner>
		<view class="tips-box"></view>
		<view class="info-box">
			<view class="info-block">
				<view class="tips-content">易朴六爻起卦</view>
				<view class="section info-tips">
					<view>选择您想要的起卦方式</view>
				</view>
				<view class="meihua-item" @click="goToPage(0)" data-name="shijian">
					<view class="meihua-titile">铜钱摇卦法</view>
				</view>
				<view class="meihua-item" @click="goToPage(1)" data-name="suiji">
					<view class="meihua-titile">卦名起卦法</view>
				</view>
				<view class="meihua-item" @click="goToPage(2)" data-name="baoshu">
					<view class="meihua-titile">硬币背数法</view>
				</view>
			</view>
		</view>
		<activity-box :positionId="201"></activity-box>
    <yipu-logo></yipu-logo>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			goToPage(type) {
        uni.navigateTo({
          url: `/pages/liuyao/liuyao?current=${type}`
        });
			}
    }
	}
</script>

<style>
	.content {
		height: 100%;
		width: 100%;
		/* overflow-y: scroll; */
		/* position: relative */
	}

	.tips-box {
		height: 400rpx;
		background-color: #c6a680;
		width: 100%;
	}

	.tips-content {
		color: #c5a57e;
		height: 65rpx;
		width: 100%;
		margin-top: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.section {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #000;
		margin-bottom: 24rpx;
	}
	.info-tips {
		margin: 58rpx 0;
	}

	.info-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: -230rpx;
	}

	.info-block {
		background-color: #fff;
		width: 640rpx;
		height: fit-content;
		border-radius: 0rpx;
		box-shadow: 0 0 20rpx #666;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 48rpx;
	}

	.meihua-item {
		width: 521rpx;
		height: 78rpx;
		
		font-size: 32rpx;
		color: #fff;
		background-color: #c6a680;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 36rpx;
	}
</style>
